<html>
<html>
<meta charset="utf-8">
<title>首页</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .container {
        margin: 50px auto;
        width: 1000px;
        height: 600px;
        background-color: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
        border-radius: 10px;
    }

    .container .top {
        width: 1000px;
        height: 80px;
        background-color: #484a4b;
    }

    .container .top .userInfo {
        padding: 30px;
        color: white;
    }

    .container .top .userInfo .status {
        display: inline-block;
        margin-left: 84%;
    }

    .container .top .userInfo p {
        display: inline-block;
        margin-left: 44%;
        color: white;
    }

    .container .aside {
        float: right;
        width: 300px;
        height: 520px;
    }

    .container .chatMain {
        float: left;
        width: 680px;
        height: 520px;
    }

    .container .aside .UserList {
        margin: 10px 0 10px 10px;
    }

    .highlight {
        color: skyblue;
        font-size: 16px;
    }

    .container .aside .System {
        margin: 100px 0 10px 10px;
    }

    .container .aside .System ul {
        color: #d5d7d6;
    }

    .container .chatMain .chatCnt .chatContent {
        width: 700px;
        height: 350px;
        margin-top: 10px;
    }

    #tex_content {
        width: 600px;
        height: 95px;
        border: 0;
        outline: 0;
        margin-left: 10px;
    }
    /** 聊天气泡*/
    .chat-sender{
        font-size: 80%;
        margin-left: 10px;
    }
    /* 图头像片 左浮动*/
    .chat-sender div:nth-of-type(1){
        float: left;
    }
    /* 用户名*/
    .chat-sender div:nth-of-type(2){
        margin: 0 50px 2px 50px;
        padding: 0px;
        color: #848484;
        font-size: 70%;
        text-align: left;
    }
    /** 聊天气泡 */
    .chat-sender div:nth-of-type(3){
        background-color: #b2e281;
        /*float: left;*/
        margin: 0 50px 10px 50px;
        padding: 10px 10px 10px 10px;
        border-radius:7px;
        text-indent: -12px;
    }
    /** 聊天气泡*/
    .chat-receiver{
        font-size: 80%;
        margin-right: 10px;
    }
    /* 图头像片 左浮动*/
    .chat-receiver div:nth-of-type(1){
        float: right;
    }
    .chat-receiver div:nth-of-type(2){
        margin: 0px 50px 2px 50px;
        padding: 0px;
        color: #848484;
        font-size: 70%;
        text-align: right;
    }
    .chat-receiver div:nth-of-type(3){
        /*float:right;*/
        background-color: #f0f0f0;
        margin: 0px 50px 10px 50px;
        padding: 10px 10px 10px 10px;
        border-radius:7px;
    }
    .chat-receiver div:first-child img,
    .chat-sender div:first-child img{
        width: 40px;
        height: 40px;
        /*border-radius: 10%;*/
    }
    .chat-left_triangle{
        height: 0px;
        width: 0px;
        border-width: 6px;
        border-style: solid;
        border-color: transparent #b2e281 transparent transparent;
        position: relative;
        left: -22px;
        top: 3px;
    }
    .chat-right_triangle{
        height: 0px;
        width: 0px;
        border-width: 6px;
        border-style: solid;
        border-color: transparent transparent transparent #f0f0f0;
        position: relative;
        right:-22px;
        top:3px;
    }
</style>
</head>

<body>
<div class="container">
    <!--top-->
    <div class="top">
        <div class="userInfo">
            当前用户：<span id="username">张三</span><span class="status"></span>
            <p id="chatMes"></p>
        </div>
    </div>
    <!--右侧栏-->
    <div class="aside">
        <!--列表-->
        <div class="UserList">
            <span class="highlight">用户列表</span>
            <div class="ui divider"></div>
            <ul id="friendsList">
                <!--渲染-->
            </ul>
        </div>
        <!--列表-->
        <div class="System">
            <span class="highlight">系统广播</span>
            <div class="ui divider"></div>
            <ul id="systemMsg">
               <!--渲染-->
            </ul>
        </div>
    </div>
    <!--聊天区-->
    <div class="chatMain">
        <!--聊天展示区域-->
        <div class="chatCnt">
            <div class="chatContent" style="overflow: scroll">
                <!--渲染聊天气泡-->
            </div>
        </div>
        <div class="ui divider" style="width:700px"></div>
        <div class="chatArea" style="display: none">
            <textarea id="tex_content" placeholder="在此输入文本内容！"></textarea>
            <div class="ui blue labeled submit icon mini button right floated" id="submit">
                <i class="icon edit"></i> Add Reply
            </div>
        </div>
    </div>
</div>
<script>
    // 聊天室主人
    var username;
    // 消息接受者
    var toName;

    // 改变和谁聊天
    function showChat(username){
        toName = username;
        // 清除聊天区数据
        $('.chatContent').html("");
        // 出现聊天对话框
        $('.chatArea').css("display","inline");
        // 显示正在和谁聊天
        $("#chatMes").html("正在和"+toName+"聊天");
        //当点击聊天人列表时，需要获与之对应的聊天记录，聊天记录存放在sessionStorage中
        // 和谁聊，比如和李四就把键值对设置为{李四:聊天记录}
        var chatData = sessionStorage.getItem(toName)
        // 第一次为null就不处理
        if(chatData != null){
            // 将聊天对象对应的聊天记录展示渲染到聊天区
            $('.chatContent').html(chatData);
        }
    }
    // 加载事件 登陆后显示用户名和状态
    $(function () {
        // 动态显示用户名 在线
        $.ajax({
            url:"/getUsername",
            type:"GET",
            //是否异步,此项目此处必须是false
            async:false,
            success:function (res) {
                username = res;
                $("#username").html(username)
                if(res == ''){
                    alert("您未登录，跳转至登录页")
                    location.href="/"
                }
            },
            error:function (){
                alert("服务器错误，用户信息未拿到")
            }
        })

        //1.创建websocket对象
        var host = window.location.host;
        var ws = new WebSocket("ws://"+host+"/chat");

        //2.给ws绑定事件
        // 建立连接后触发
        ws.onopen = function () {
            // 建立连接后 显示用户名和在线
            $("#username").html(username)
            $(".status").html("<font style='color: green'>在线</font>")
        }
        // 接收到服务端的推送后触发
        ws.onmessage = function (evt) {
            // 获取服务端推送过来的消息
            var dataStr = evt.data;
            // 将dataStr转为JSON对象 格式举例（需要判断是否是系统消息）：{“systemMsgFlag”: false, "fromName": "李白", "message": “你在哪里呀？”}
            var jsonData = JSON.parse(dataStr);
            // 判断是否为系统消息
            if (jsonData.systemMsgFlag) {
                // 系统消息
                var friendsList = ""; // 好友列表
                var systemMsg = "";   // 系统广播
                var allNames = jsonData.message; // 所有的用户名
                for (var name of allNames) {
                    // 去掉当前用户名
                    if (username !== name) {
                        friendsList += "<li><a style='text-decoration: underline;cursor: pointer' onclick='showChat(\""+ name +"\")'>"+name+"</a></li>";
                        systemMsg += "<li>您的好友"+name+" 上线啦！</li>";
                    }
                }
                //渲染页面
                // 1. 好友列表展示
                $("#friendsList").html(friendsList);
                // 2. 系统广播的展示
                $("#systemMsg").html(systemMsg);
            }else{
                // 非系统消息
                // 将服务端推送的消息进行展示
                //不是系统消息，是发送给指定用户的消息,示例值：{“systemMsgFlag”: false, "fromName": "李白", "message": “你在哪里呀？”}
                var str = " <div class=\"chat-receiver\">\n" +
                    "                    <div><img src=\"https://semantic-ui.com/images/avatar/small/jenny.jpg\"></div>\n" +
                    "                    <div>"+toName+"</div>\n" +
                    "                    <div>\n" +
                    "                        <div class=\"chat-right_triangle\"></div>\n" +
                    "                        <span> "+jsonData.message+"</span>\n" +
                    "                    </div>\n" +
                    "                </div>"
                // str为接受的消息 判断接受的消息是否为当前聊天对象的消息
                if(toName == jsonData.fromName ){
                    // 是当前聊天对象就进行拼接
                    $('.chatContent').append(str);
                }
                $('.chatContent').append(str);
                // 接受的消息需要存储
                // 获取聊天指定的用户名
                var chatData = sessionStorage.getItem(jsonData.fromName);
                // 不为空 第一次存
                if (chatData != null) {
                    // 把聊天记录和之前的拼接并存到sessionStorage中
                    str = chatData + str;
                }
                sessionStorage.setItem(jsonData.fromName,str);
            }
        }
        //关闭连接触发
        ws.onclose = function () {
            // 端口连接后 显示离线线
            $("#username").html(username)
            $(".status").html("<font style='color: red'>离线</font>")
        };

        // 发送按钮点击
        $("#submit").click(function () {
            // 获取发送输入框中的内容
            var data = $("#tex_content").val();
            // 点击发送后，清空输入内容框架
            $("#tex_content").val("");
            // 消息格式
            var sendJson = {"toName": toName, "message": data};
            // 聊天框显示发送内容 父盒子chatContent
            var str = "<div class=\"chat-sender\">\n" +
                "                    <div><img src=\"https://semantic-ui.com/images/avatar/small/elliot.jpg\"></div>\n" +
                "                    <div>"+username+"</div>\n" +
                "                    <div>\n" +
                "                        <div class=\"chat-left_triangle\"></div>\n" +
                "                        <span> "+data+"</span>\n" +
                "                    </div>\n" +
                "                </div>"
            $(".chatContent").append(str);
            // 获取与指定用户的聊天对象
            var chatData = sessionStorage.getItem(toName);
            // 不为空 说明存在聊天记录
            if (chatData != null) {
                // 把之前的数据chatData和新聊天记录str拼接并存到sessionStorage中
                str = chatData + str;
            }
            sessionStorage.setItem(toName,str);
            // 发送数据给服务端
            ws.send(JSON.stringify(sendJson));
        });
    })
</script>
</body>

</html>